<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../JS/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<login @func='getmsg'></login> <!--将父组件的方法引用传递给子组件-->
		</div>
		
		<template id="mytemp">
			<button @click='sendmsg'>发送消息</button>
		</template>
		
		
		<script>
			let app = new Vue({
				el: '#app',
				methods:{
					getmsg(val){
						alert(val)
					}
				},
				components:{
					login:{
						template:'#mytemp',
						data(){
							return { msg:"hello world" }
						},
						methods:{
						sendmsg(){
							// 调用绑定的func方法
							// 由于在上面func绑定的是getmsg，所以下面这行代码就是调用getmsg
							// 父组件
							this.$emit('func',this.msg)
							}
						}
					}					
				}
			})
		</script>
	</body>
</html>
